<script setup>
	import {
		computed,
		ref,
		toRefs,
		inject,
		watch,
		watchEffect,
		onMounted,
	} from 'vue'
	import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue'
	import { useStore } from 'vuex'
	import { useRouter } from 'vue-router'

	const store = useStore()

	// 判断类型
	const router = useRouter()
	const type = router.currentRoute.value.meta.type

	// const stepIndex = computed(() => {
	// 	return store.state.pageStore.stepIndex
	// })
	const { stepIndex, resultBase64Url } = toRefs(
		store.state.pageStore.resultInfo[type]
	)
	const resultState = computed(() => {
		return store.state.pageStore.resultInfo[type].resultState
	})

	const next = () => {
		if (
			store.state.pageStore.resultInfo[type].stepIndex == 1 &&
			store.state.pageStore.resultInfo[type].isValidation
		) {
			store.state.pageStore.resultInfo[type].stepIndex = 2
		} else if (!store.state.pageStore.resultInfo[type].isValidation)
			store.state.pageStore.resultInfo[type].stepIndex = 1
		else {
			store.state.pageStore.resultInfo[type].stepIndex++
		}
	}

	const pre = () => {
		if (store.state.pageStore.resultInfo[type].stepIndex-- == 0)
			store.state.pageStore.resultInfo[type].stepIndex = 0
	}
	const back = () => {
		store.state.pageStore.resultInfo[type].stepIndex = 0
		store.state.pageStore.resultInfo[type].resultState = false
		// store.state.pageStore.resultInfo[type].resultBase64Url.length = 0
	}

	const initState = () => {
		if (store.state.pageStore.resultInfo[type].stepIndex == 0) {
			store.state.pageStore.resultInfo[type].isValidation = false
			store.state.pageStore.resultInfo[type].resultBase64Url = ''
		}
	}
	onMounted(() => {
		watchEffect(() => {
			initState()
		})
	})
</script>

<template>
	<div class="stepbar">
		<el-steps style="width: 85%" :space="150" :active="stepIndex" simple>
			<el-step title="选择图片" :icon="Edit" />
			<el-step title="上传图片" :icon="UploadFilled" />
			<el-step title="分析并获得结果" :icon="Picture" />
		</el-steps>
		<div class="btn-group">
			<el-button
				v-if="stepIndex != 3"
				size="large"
				color="#626aef"
				class="per-step"
				:disabled="stepIndex == 0"
				@click="pre()"
				>Pre Step</el-button
			>
			<el-button
				v-if="stepIndex != 3"
				size="large"
				color="#626aef"
				class="next-step"
				:disabled="
					!store.state.pageStore.resultInfo[type].isValidation && stepIndex == 1
				"
				@click="next()"
				>Next Step</el-button
			>
			<div class="tips" v-if="stepIndex == 3">*点击图片可放大预览</div>
			<el-button
				v-if="stepIndex == 3"
				type="primary"
				plain
				size="large"
				class="back-step"
				@click="back()"
				>Back To Begin
			</el-button>
		</div>
	</div>
</template>
<style scoped lang="less">
	.stepbar {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 2%;
		position: relative;
	}
	.btn-group {
		z-index: 1;
		top: 150px;
		width: 35%;
		position: absolute;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		transition: all 0.5s ease-in-out;
	}
	.tips {
		position: absolute;
		top: -25px;
		font-size: 14px;
		color: #bebebe;
	}
</style>
